.about-page
  height: 100%
  overflow-y: auto
  overflow-x: hidden
  width: 100%
  max-width: 100%
  box-sizing: border-box

  .about-hero
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
    color: white
    padding: 40px 0
    text-align: center
    position: relative
    overflow: hidden
    border-radius: 12px
    margin-bottom: 24px
    box-sizing: border-box

    &::before
      content: ''
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>')
      opacity: 0.3

    .hero-content
      position: relative
      z-index: 1
      max-width: 800px
      margin: 0 auto
      padding: 0 24px

      .hero-avatar
        background: rgba(255, 255, 255, 0.2)
        border: 3px solid rgba(255, 255, 255, 0.3)
        margin-bottom: 24px
        font-size: 40px

      .hero-title
        color: white
        margin-bottom: 16px
        font-size: 48px
        font-weight: 700
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)

      .hero-subtitle
        color: rgba(255, 255, 255, 0.9)
        margin-bottom: 24px
        font-size: 24px
        font-weight: 300

      .hero-description
        color: rgba(255, 255, 255, 0.8)
        font-size: 18px
        line-height: 1.6
        margin-bottom: 32px

  .about-content
    padding: 0
    width: 100%
    max-width: 100%
    box-sizing: border-box

    // 确保Row和Col不会溢出
    .ant-row
      width: 100%
      max-width: 100%
      margin-left: 0 !important
      margin-right: 0 !important

    .ant-col
      width: 100%
      max-width: 100%
      box-sizing: border-box

    .section-title
      text-align: center
      margin-bottom: 48px
      color: #000000 !important
      font-size: 32px
      font-weight: 700
      background: transparent

      .anticon
        margin-right: 12px
        color: #1890ff

    // 核心特性样式
    .features-section
      .feature-card
        height: 100%
        text-align: center
        border-radius: 12px
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
        transition: all 0.3s ease
        border: 2px solid transparent
        width: 100%
        max-width: 100%
        box-sizing: border-box

        &:hover
          transform: translateY(-4px)
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15)

        .feature-icon
          font-size: 48px
          margin-bottom: 16px
          display: block

        .feature-title
          margin-bottom: 12px
          color: #1f2937
          font-size: 20px
          font-weight: 600

        .feature-description
          color: #6b7280
          font-size: 14px
          line-height: 1.5
          margin-bottom: 0

    // 系统架构样式
    .architecture-section
      .architecture-card
        height: 100%
        border-radius: 12px
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
        width: 100%
        max-width: 100%
        box-sizing: border-box

        .agent-item
          padding: 16px
          border-radius: 8px
          background: #f8fafc
          border: 1px solid #e2e8f0

          .agent-header
            margin-bottom: 8px

          .agent-description
            margin-bottom: 0
            color: #6b7280
            font-size: 14px

        .tech-stack
          .tech-tag
            margin: 4px
            padding: 4px 12px
            border-radius: 16px
            font-size: 12px
            font-weight: 500

    // 开发路线图样式
    .roadmap-section
      .ant-timeline
        width: 100%
        max-width: 100%
        overflow: hidden
        padding-left: 0
        margin-left: 0

        .ant-timeline-item
          width: 100%
          max-width: 100%
          margin-bottom: 16px

          .ant-timeline-item-content
            width: 100%
            max-width: 100%
            margin-left: 0
            padding-left: 0

      .roadmap-card
        border-radius: 8px
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
        width: 100%
        max-width: 100%
        box-sizing: border-box
        margin-left: 0
        margin-right: 0

        .roadmap-header
          display: flex
          justify-content: space-between
          align-items: center
          margin-bottom: 12px
          flex-wrap: wrap
          gap: 8px

          .roadmap-version
            margin-bottom: 0
            color: #1f2937
            font-size: 16px
            font-weight: 600
            flex: 1
            min-width: 0

        .roadmap-features
          margin: 0
          padding-left: 20px
          word-wrap: break-word
          overflow-wrap: break-word

          li
            color: #6b7280
            font-size: 14px
            line-height: 1.6
            margin-bottom: 4px
            word-wrap: break-word
            overflow-wrap: break-word

    // 项目信息样式
    .project-info-section
      .info-card
        height: 100%
        border-radius: 12px
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
        width: 100%
        max-width: 100%
        box-sizing: border-box

        .contact-item
          display: flex
          align-items: center
          padding: 8px 0

          .contact-icon
            margin-right: 12px
            color: #1890ff
            font-size: 16px

    // 致谢样式
    .acknowledgments-section
      .acknowledgment-card
        height: 100%
        border-radius: 8px
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
        transition: all 0.3s ease
        width: 100%
        max-width: 100%
        box-sizing: border-box

        &:hover
          transform: translateY(-2px)
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15)

        .acknowledgment-content
          text-align: center
          padding: 16px

          h5
            margin-bottom: 8px
            color: #1f2937
            font-size: 16px
            font-weight: 600
  .about-page
    .about-hero
      padding: 60px 0

      .hero-content
        .hero-title
          font-size: 36px

        .hero-subtitle
          font-size: 20px

        .hero-description
          font-size: 16px

    .about-content
      padding: 0

      .section-title
        font-size: 24px
        margin-bottom: 32px